<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
	<!--<router-link></router-link>-->
	<router-view></router-view>

	<div class="container">
		<router-view name="aside"></router-view>
		<router-view name='main'></router-view>
	</div>
</div>

<script type="text/javascript">
	var header = {
		template: '<h3 class="header">头部组件</h3>'
	}
	var aside = {
		template: '<h3 class="aside">左边组件</h3>'
	}
	var main = {
		template: '<h3 class="main">主局组件</h3>'
	}

	var routerobj = new VueRouter({
		routes: [{
			path: '/',
			components: {
				default: header,
				'aside': aside,
				'main': main
			}
		}]
	})

	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		router: routerobj
	})
</script>

<style type="text/css">
	html,
	body,
	* {
		margin: 0;
		padding: 0;
	}

	.header {
		height: 100px;
		background-color: yellow;
		text-align: center;
		line-height: 100px;
	}

	.container {
		display: flex;
		justify-content: space-between;
		height: 800px;
	}

	.aside {
		display: flex;
		background-color: green;
		flex: 2;
		justify-content: center;
		align-items: center;
	}

	.main {
		display: flex;
		background-color: hotpink;
		flex: 8;
		justify-content: center;
		align-items: center;
	}
</style>